<template>
  <div class="footer">
    <!-- 有两种形式 输入框,分别是激活前和激活后状态 -->
    <!-- 未激活状态 -->
    <div class="disable" v-if="!isFocus">
      <input type="text" class="commentInput" placeholder="写跟帖" @focus="showArea" />
      <div class="commentIcon">
        <div class="commentNumber">{{post.comment_length}}</div>
        <span class="iconfont iconpinglun-"></span>
      </div>
      <span class="iconfont iconshoucang" :class="{red:post.has_star}" @click="star"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 激活状态 -->
    <div class="enable" v-if="isFocus">
      <textarea class="commentArea" v-model="comment" rows="3" @blur="handleblur" ref="commentArea"></textarea>
      <div class="btnSend" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post", "isActive", "replyObj"],
  watch: {
    isActive() {
      // 回复组件触发父组件postdetail 父组件再传递过来的参数
      // 可以获取到传过来的 replyObj
      // 本身文章的 id this.post.id;
      console.log("这里是parentid" + this.replyObj.id);
      console.log("这里是 文章的id" + this.post.id);
      // 我们还缺少输入的内容, 弹出输入框等待用户输入
      this.isFocus = this.isActive;
    }
  },
  data() {
    return {
      // 记录焦点状态的变量,默认是没有焦点的
      isFocus: false,
      comment: ""
    };
  },
  methods: {
    handleblur() {
      // 判断 tetxarea 有没有内容,如果有暂时不要隐藏
      if (!this.comment) {
        this.isFocus = false;
      }
    },
    send() {
      // 这里应该发送 ajax 请求,提交评论
      // 如果评论成功,应该清除所有已经输入的评论内容,并将输入框收起来
      this.$axios({
        url: "/post_comment/" + this.post.id,
        method: "post",
        data: {
          content: this.comment,
          parent_id: this.replyObj ? this.replyObj.id : null
        }
      }).then(res => {
        // 发送这个评论完成,需要清空评论,讲评论框缩小
        this.comment = "";
        this.isFocus = false;
        // 请求发送完毕,为了更新页面数据,需要向父组件触发一个自定义事件
        this.$emit("newComment");
      });
    },
    showArea() {
      this.isFocus = true;

      this.$nextTick(() => {
        this.$refs.commentArea.focus();
      });
    },
    star() {
      this.$axios({
        url: "/post_star/" + this.post.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        // 判断当前是否收藏了,还是未收藏
        if (message == "收藏成功") {
          this.post.has_star = true;
        } else if (message == "取消成功") {
          this.post.has_star = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.red {
  color: red;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  .disable {
    display: flex;
    justify-content: space-between;
    align-self: center;
    padding: 2.778vw;
    background: #f2f2f2;
    .commentInput {
      height: 8.611vw;
      line-height: 8.611vw;
      padding: 0 4.444vw;
      outline: none;
      border: none;
      background: #d7d7d7;
      color: #666;
      font-size: 3.889vw;
      border-radius: 4.444vw;
    }
    .iconfont {
      font-size: 6.389vw;
    }
    .commentIcon {
      position: relative;
      .commentNumber {
        position: absolute;
        top: -8px;
        left: 1.667vw;
        height: 4.444vw;
        line-height: 4.444vw;
        padding: 0 2.222vw;
        background: red;
        color: white;
        font-size: 3.333vw;
        box-sizing: border-box;
        border-radius: 2.222vw;
      }
    }
  }
  .enable {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 2.778vw;
    .commentArea {
      width: 75vw;
      padding: 4.444vw;
      border: none;
      outline: none;
      background: #d7d7d7;
      color: #666;
      box-sizing: border-box;
      border-radius: 2.222vw;
      resize: none;
    }
    .btnSend {
      height: 7.222vw;
      line-height: 7.222vw;
      padding: 0 4.167vw;
      border: 1px solid red;
      background: red;
      color: white;
      font-size: 14px;
      border-radius: 3.611vw;
    }
  }
}
</style>